<template>
  <van-overlay :show="modalVisible" @click.stop="toggleDownModal">
    <div class="modal-wrapper">
      <div class="modal-content">
        <h4 class="modal-title">{{ $t('select_down_mode') }}</h4>

        <van-button
          type="danger"
          block
          round
          size="small"
          @click="androidApkDownload"
        >
          <img class="btn-icon" src="@/assets/img/download@2x.png" alt="" />
          {{ $t('download_apk') }}</van-button
        >
        <van-button block round size="small" @click="androidStoreDownload">
          <img class="btn-icon" src="@/assets/img/googleplay@2x.png" alt="" />
          {{ $t('app_store') }}</van-button
        >
      </div>
    </div>
  </van-overlay>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    apkUrl: {
      type: String,
      required: true
    },
    storeUrl: {
      type: String,
      required: true
    }
  },

  data() {
    return {};
  },

  computed: {
    modalVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    }
  },
 
  methods: {
    toggleDownModal() {
      this.modalVisible = !this.modalVisible;
    },

    androidApkDownload() {
      const iframe = document.createElement('iframe');
      const body = document.body;
      iframe.style.cssText = 'display:none;width=0;height=0';
      body.appendChild(iframe);
      iframe.src = this.apkUrl;
      if (this.isFacebookApp()) {
        window.location.href = this.apkUrl;
      }
    },

    androidStoreDownload() {
      window.location.href = this.storeUrl;
    },

    isFacebookApp() {
      let ua = navigator.userAgent || navigator.vendor || window.opera;
      return ua.indexOf('FBAN') > -1 || ua.indexOf('FBAV') > -1;
    }
  }
};
</script>
<style lang="scss" scoped>
.modal-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .modal-content {
    width: 526px;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    .modal-title {
      font-size: 32px;
      color: #0c0c1c;
      margin-bottom: 60px;
    }
    /deep/ {
      .van-button {
        margin: 30px 0;
      }
    }
    .btn-icon {
      display: inline-block;
      height: 32px;
      width: 32px;
      margin: 0 4px 0 0;
    }
  }
}
</style>
